<template>
	<view>
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" display-multiple-items="2" circular="true" @change="getIndex" :current="current"
					 next-margin="140upx">
						<swiper-item v-for="(item,index) in sData" :class="index==current?'sImg_s':''" @click="goIndex" :data-index="index"
						 :data-lanmu_id="item.books[0].lanmu_id">
							<image class="sImg" :data-src="item.books[0].img" :class="index==current?'sImg_s':''" :src="item.books[0].img" mode=""></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view class="rankListBox">
			<view class="rankListH" v-if="rankBookList.length != 0">
				<view class="rankListOne" @click="goDetail" :data-id="rankBookList.books[0].id">
					<view class="rankListTitle">{{rankBookList.name}}</view>
					<view class="rankListNames">
						<image class="rankListOneIcon" src="../../../static/image_no.1@2x.png" mode=""></image>
						<view class="rankListName">{{rankBookList.books[0].name}}</view>
					</view>
				</view>
				<view class="addSJ" :class="ifsuccess?'addSJA':''" :data-id="rankBookList.books[0].id" @click="addShuJia"
				 :data-item="JSON.stringify(rankBookList.books[0])">{{ifsuccess?'已加入':'加入书架'}}</view>
			</view>
			<view class="rankListCon" v-if="rankBookList.length != 0">
				<view class="rankListItem" v-for="(item,index) in rankBookList.books.slice(1)" @click="goDetail" :data-id="item.id">
					<image :src="item.img" class="bookImg" mode="" @load="ok(index)"></image>
					<view class="bookInfo">
						<view class="bookInfoNames">
							<image class="bookSortIcon" v-if="index<2" :src="index == 0?'../../../static/sign_no.2@2x.png':(index == 1?'../../../static/sign_no.3@2x.png':'')"
							 mode=""></image>
							<view class="bookName">{{item.name}}</view>
						</view>
						<view class="bookDesc">{{item.desc}}</view>
						<view class="bookAuthor">{{item.author}}</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadStatus"></uni-load-more>
	</view>
</template>

<script>
	import key from '@/common/key.js';
	import utils from '@/common/utils.js';
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	import loadLazy from "../../../components/lazy-image.vue";
	export default {
		data() {
			return {
				current: 0,
				sData: [],
				rankBookList: [],
				page: 1,
				lanmu_id: 0,
				name: '',
				total: true,
				loadStatus: 'loading',
				ifsuccess: false,
				is_ok: false,
			}
		},
		created() {
			this.getRankData()
		},
		onReachBottom() {
			this.lanmu_id = this.sData[this.current].lanmu_id
			this.name = this.sData[this.current].name
			if (this.total) {
				this.page++
				this.getRankDetail(this.lanmu_id, this.name, 1)
			} else {

			}

		},
		components: {
			uniLoadMore,
			loadLazy
		},
		methods: {
			// 组件自带
			ok(e) {
				console.log(e);
				this.is_ok = true
			},
			getIndex(e) {
				this.lanmu_id = this.sData[e.detail.current].lanmu_id
				this.name = this.sData[e.detail.current].name
				this.current = e.detail.current
				this.page = 1
				this.loadStatus = "loading"
				this.getRankDetail(this.lanmu_id, this.name, 0)
				uni.showLoading({
					title:"加载中"
				})
			},

			// 点击事件
			goIndex(e) {
				this.current = e.currentTarget.dataset.index
			},
			goDetail(e) {
				let book_id = e.currentTarget.dataset.id
				uni.navigateTo({
					url: '/pages/childPages/bookDetail/bookDetail?book_id=' + book_id
				})
			},
			addShuJia(e) {
				console.log();
				const item = JSON.parse(e.currentTarget.dataset.item);
				item.book_id = item.id
				console.log(item);
				const ifsuccess = utils.addshujia(item);
				if (!this.ifsuccess) {
					this.ifsuccess = ifsuccess
				}
			},
			// 请求数据
			getRankData() {
				const data = {
					"app": "YLXS_Android",
					"channel": "H5",
					"device_id": 0,
					"t_channel": "YLXS_Android",
					"version": "1.0.0"
				}

				let sign = utils.sortObj(data)
				uni.request({
					url: `${key.URL}a2/bangdan`,
					method: 'POST',
					data: {
						"app": "YLXS_Android",
						"channel": "H5",
						"device_id": 0,
						"t_channel": "YLXS_Android",
						"version": "1.0.0",
						"sign": sign,
					},
					dataType: 'json',
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						if (res.data.status == 200) {
							let rankList = res.data.data;
							let rankListItem = []
							rankList.forEach((val, index, arr) => {
								arr[index].books.forEach((val, index, arr) => {
									arr[index].img = utils.imgMd5(arr[index].img)
								})
							})
							this.sData = JSON.parse(JSON.stringify(rankList))
							this.rankBookList = JSON.parse(JSON.stringify(rankList[0]))
							if (uni.getStorageSync('addshujiaData') != []) {
								let storageData = uni.getStorageSync('addshujiaData')
								let is_On = storageData.map((item, index, arr) => {
									return Number(item.book_id)
								})
								this.rankBookList.books[0].book_id = this.rankBookList.books[0].id
								this.ifsuccess = is_On.includes(Number(this.rankBookList.books[0].book_id))
							}
						}
					}
				});
			},
			getRankDetail(lanmu_id, name, is_one) {
				
				const data = {
					"app": "YLXS_Android",
					"channel": "H5",
					"device_id": 0,
					"t_channel": "YLXS_Android",
					"version": "1.0.0",
					"lanmu_id": lanmu_id,
					"page": this.page
				}

				let sign = utils.sortObj(data)
				uni.request({
					url: `${key.URL}a2/bangdan/info`,
					method: 'POST',
					data: {
						"app": "YLXS_Android",
						"channel": "H5",
						"device_id": 0,
						"t_channel": "YLXS_Android",
						"version": "1.0.0",
						"lanmu_id": lanmu_id,
						"page": this.page,
						"sign": sign,
					},
					dataType: 'json',
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						uni.hideLoading()
						if (res.data.status == 200 && res.data.data.length != 0) {
							
							if (is_one == 0) {
								this.rankBookList.books = []
								this.total = true
							}
							let rankList = res.data.data;
							rankList.forEach((val, index, arr) => {
								arr[index].img = utils.imgMd5(arr[index].img)
							})
							this.rankBookList.books.push(...rankList)
							this.rankBookList.name = name
							this.rankBookList.lanmu_id = lanmu_id
							if (uni.getStorageSync('addshujiaData') != []) {
								let storageData = uni.getStorageSync('addshujiaData')
								let is_On = storageData.map((item, index, arr) => {
									return item.book_id
								})
								this.rankBookList.books[0].book_id = this.rankBookList.books[0].id
								this.ifsuccess = is_On.includes(Number(this.rankBookList.books[0].book_id))
							}
						} else {
							console.log('人家是有底线的');
							this.loadStatus = 'noMore'
							this.total = false
						}
					}
				});
			},
		}
	}
</script>

<style>

	.addSJA {
		background: #ccc !important;
	}

	.rankListCon {
		margin-top: 10upx;
	}

	.rankListItem {
		padding: 20upx 30upx;
		box-sizing: border-box;
		display: flex;
	}

	.bookImg {
		width: 150upx;
		height: 198upx;
		margin-right: 30upx;
	}

	.bookInfo {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 550upx;
	}

	.bookInfoNames {
		display: flex;
		align-items: center;
	}

	.bookSortIcon {
		width: 36upx;
		height: 36upx;
		margin-right: 20upx;
	}

	.bookName {
		font-size: 30upx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(75, 76, 93, 1);
	}

	.bookDesc {
		font-size: 28upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(129, 130, 149, 1);
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.bookAuthor {
		font-size: 24upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(179, 179, 193, 1);
	}

	.rankListH {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding: 20upx 30upx;
		box-sizing: border-box;
	}

	.rankListTitle {
		font-size: 40upx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(75, 76, 93, 1);
		margin-bottom: 20upx;
	}

	.rankListOneIcon {
		width: 52upx;
		height: 30upx;
		margin-right: 20upx;
	}

	.rankListNames {
		display: flex;
		align-items: center;
		font-size: 30upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(75, 76, 93, 1);
	}

	.addSJ {
		width: 160upx;
		height: 64upx;
		text-align: center;
		line-height: 64upx;
		border-radius: 8upx;
		border: none;
		font-size: 28upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		background: #4F50CE;
	}



	.swiper {
		height: 360upx;

	}

	.sImg {
		width: 235upx;
		height: 312upx;
		vertical-align: bottom;
	}

	.sImg_s {
		width: 250upx;
		height: 333upx;
	}

	uni-swiper-item {
		display: flex !important;
		justify-content: center;
		align-items: flex-end;
	}
</style>
